<template>
    <!--柱状图-->
    <V3Echarts :options="option" :width="props.width" :height="props.height" />
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import * as echarts from 'echarts'
import { LINE_TOOLTIP } from '../chartConfig'
import V3Echarts from '@/stories/components/V3Echarts/index.vue'

const props = defineProps({
    width: {
        type: Number,
        default: 1000
    },
    height: {
        type: Number,
        default: 400
    },
    barWidth: { type: Number, default: 10 },
    optionData: {
        type: Object,
        default: () => {
            return {
                xData: ['供配电系统', '消防系统', '给排水系统', '空调系统', '电梯系统', '监控系统'],
                legendData: ['处理中', '未处理', '已处理'],
                data: [
                    [320, 332, 301, 334, 390, 390],
                    [220, 182, 191, 234, 290, 290],
                    [150, 232, 201, 154, 190, 190]
                ]
            }
        }
    },
    dataZoom: {
        type: Boolean,
        default: false
    }
})

const option = ref()

const initChart = () => {
    const newVal = JSON.parse(JSON.stringify(props.optionData))
    option.value = {
        color: ['#2190aa', '#4b71ef', '#94e5f9'],
        dataZoom: props.dataZoom
            ? [
                  {
                      show: props.dataZoom,
                      start: 0,
                      end: 50,
                      height: 10,
                      bottom: '5%'
                  }
              ]
            : [],
        tooltip: LINE_TOOLTIP,
        legend: {
            right: 0,
            icon: 'pin',
            textStyle: {
                color: 'rgba(255, 255, 255, 1)',
                fontSize: 10
            },
            data: newVal?.legendData
        },
        grid: {
            top: '15%',
            left: '0%',
            right: '5%',
            bottom: props.dataZoom ? '10%' : '0',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: true,
                interval: 0,
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: 'rgba(255,255,255,0.8)',
                        width: 1
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: 'rgba(255,255,255,0.8)',
                        fontSize: 10
                    }
                },
                axisTick: {
                    show: true
                },
                data: newVal?.xData
            }
        ],
        yAxis: [
            {
                type: 'value',
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: 'rgba(39, 41, 58, 0.3)',
                        width: 1
                    }
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: 'rgba(255,255,255,0.8)',
                        width: 1
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: 'rgba(255,255,255,0.8)',
                        fontSize: 10
                    }
                }
            }
        ],
        series: [
            {
                name: newVal?.legendData[0],
                type: 'bar',
                barGap: 0,
                barWidth: props.barWidth,
                emphasis: {
                    focus: 'series'
                },
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                        {
                            offset: 0,
                            color: 'transparent'
                        },
                        {
                            offset: 1,
                            color: '#2190aa'
                        }
                    ])
                },
                data: newVal?.data[0]
            },
            {
                name: newVal?.legendData[1],
                type: 'bar',
                barWidth: props.barWidth,
                emphasis: {
                    focus: 'series'
                },
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                        {
                            offset: 0,
                            color: 'transparent'
                        },
                        {
                            offset: 1,
                            color: '#4b71ef'
                        }
                    ])
                },
                data: newVal?.data[1]
            },
            {
                name: newVal?.legendData[2],
                type: 'bar',
                barWidth: props.barWidth,
                emphasis: {
                    focus: 'series'
                },
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                        {
                            offset: 0,
                            color: 'transparent'
                        },
                        {
                            offset: 1,
                            color: '#94e5f9'
                        }
                    ])
                },
                data: newVal?.data[2]
            }
        ]
    }
}

watch(
    () => props,
    newVal => {
        initChart()
    },
    {
        immediate: true,
        deep: true
    }
)
</script>

<style scoped lang="scss"></style>
